<template>
  <f7-page>
      <f7-button class="col" raised @click="$refs.actionsOneGroup.open()">One group</f7-button>
      <f7-actions ref="actionsOneGroup">
      <f7-actions-group class="cs">
        <f7-actions-label>Do something</f7-actions-label>
        <f7-actions-button bold>Button 1</f7-actions-button>
        <f7-actions-button>Button 2</f7-actions-button>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>

<script>
export default {
 data(){
     return {
         actionsOneGroup: false
     }
 }
}
</script>

<style>
.cs{
    --f7-actions-button-text-align: center;
    --f7-actions-label-justify-content: center;
}
</style>